<script setup>
import { defineProps, defineEmits, ref, onMounted } from 'vue';
import { getUserProfile } from '@/api/user';

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
});

// 添加加载状态
const isLoading = ref(false);
const isLoaded = ref(false);

console.log(props.formData)

const emit = defineEmits(['update:formData', 'save', 'reset']);

// 控制确认对话框显示
const showConfirmDialog = ref(false);

// 处理保存
const handleSave = () => {
  // 显示确认对话框
  showConfirmDialog.value = true;
};

// 确认保存后提交
const confirmSave = () => {
  showConfirmDialog.value = false;
  emit('save');
};

// 取消保存
const cancelSave = () => {
  showConfirmDialog.value = false;
};

const handleReset = () => {
  emit('reset');
};

// 在onMounted函数中处理API返回的数据
onMounted(async () => {
  isLoading.value = true;
  
  try {
    // 调用API获取用户信息
    const response = await getUserProfile();
    console.log('获取用户信息响应：', response);
    
    // 处理API返回的数据
    if (response.data && response.data.code === 200) {
      const userData = response.data.data;
      
      // 创建新的formData对象，而不是直接修改props
      const updatedFormData = {
        ...props.formData,
        username: userData.username || props.formData.username || '',
        lastName: userData.lastName || props.formData.lastName || '',
        firstName: userData.firstName || props.formData.firstName || '',
        email: userData.email || props.formData.email || '',
        phone: userData.phone || props.formData.phone || '',
        nationality: userData.nationality || props.formData.nationality || '',
        gender: userData.gender || props.formData.gender || '',
        // 注意：后端返回的是preferredLanguage，而不是language
        language: userData.preferredLanguage || props.formData.language || 'zh'
      };
      
      // 通过emit事件更新父组件中的formData
      emit('update:formData', updatedFormData);
      
      console.log('表单数据已更新:', updatedFormData);
    } else {
      console.warn('获取用户信息失败:', response.data?.message);
    }
  } catch (error) {
    console.error('获取用户信息出错:', error);
  } finally {
    isLoading.value = false;
    
    // 设置页面加载状态，触发动画
    setTimeout(() => {
      isLoaded.value = true;
    }, 300);
  }
});
</script>

<template>
  <div class="form-section">
    <h2 class="section-title">基本信息</h2>
    
    <div class="form-group">
      <label>用户名 <span class="required">*</span></label>
      <input 
        type="text" 
        v-model="formData.username" 
        placeholder="请输入用户名"
        @input="$emit('update:formData', {...formData, username: $event.target.value})"
      >
    </div>
    
    <div class="form-row">
      <div class="form-group">
        <label>姓氏</label>
        <input 
          type="text" 
          v-model="formData.lastName" 
          placeholder="请输入姓氏"
          @input="$emit('update:formData', {...formData, lastName: $event.target.value})"
        >
      </div>
      <div class="form-group">
        <label>名字</label>
        <input 
          type="text" 
          v-model="formData.firstName" 
          placeholder="请输入名字"
          @input="$emit('update:formData', {...formData, firstName: $event.target.value})"
        >
      </div>
    </div>
    
    <div class="form-row">
      <div class="form-group">
        <label>国籍</label>
        <select 
          v-model="formData.nationality"
          @change="$emit('update:formData', {...formData, nationality: $event.target.value})"
        >
          <option value="">请选择国籍</option>
          <option value="china">中国</option>
          <option value="usa">美国</option>
          <option value="uk">英国</option>
          <option value="japan">日本</option>
          <option value="korea">韩国</option>
          <option value="other">其他</option>
        </select>
      </div>
      <div class="form-group">
        <label>性别</label>
        <select 
          v-model="formData.gender"
          @change="$emit('update:formData', {...formData, gender: $event.target.value})"
        >
          <option value="">请选择性别</option>
          <option value="male">男</option>
          <option value="female">女</option>
          <option value="other">其他</option>
          <option value="private">不愿透露</option>
        </select>
      </div>
    </div>
    
    <div class="form-group">
      <label>电子邮箱</label>
      <input 
        type="email" 
        v-model="formData.email" 
        placeholder="请输入电子邮箱"
        @input="$emit('update:formData', {...formData, email: $event.target.value})"
      >
    </div>
    
    <div class="form-group">
      <label>手机号码</label>
      <input 
        type="tel" 
        v-model="formData.phone" 
        placeholder="请输入手机号码"
        @input="$emit('update:formData', {...formData, phone: $event.target.value})"
      >
    </div>
  </div>
  
  <div class="form-section">
    <h2 class="section-title">个人偏好</h2>
    

    
    <div class="form-group">
      <label>语言偏好</label>
      <select 
        v-model="formData.language"
        @change="$emit('update:formData', {...formData, language: $event.target.value})"
      >
        <option value="zh">中文</option>
        <option value="en">英文</option>
      </select>
    </div>
  </div>
  
  <div class="form-actions">
    <button class="save-btn" @click="handleSave">保存更改</button>
    <button class="cancel-btn" @click="handleReset">重置</button>
  </div>
  
  <!-- 确认对话框 -->
  <div v-if="showConfirmDialog" class="confirm-dialog-overlay">
    <div class="confirm-dialog">
      <h3>确认保存</h3>
      <p>您确定要保存个人信息的更改吗？</p>
      <div class="confirm-actions">
        <button class="confirm-btn" @click="confirmSave">确认</button>
        <button class="cancel-btn" @click="cancelSave">取消</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.form-section {
  margin-bottom: 30px;
  animation: slideIn 0.6s ease-out forwards;
  opacity: 0.1;
}

.form-section:nth-child(1) {
  animation-delay: 0.2s;
}

.form-section:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes slideIn {
  0% {
    opacity: 0.1;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.section-title {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-group {
  flex: 1;
}

label {
  display: block;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 8px;
}

.required {
  color: #ff5a5a;
  margin-left: 4px;
}

input, select {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, select:focus {
  border-color: #00c389;
  box-shadow: 0 0 0 2px rgba(0, 195, 137, 0.2);
  outline: none;
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 0.1;
}

@keyframes fadeUp {
  0% {
    opacity: 0.1;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.save-btn {
  padding: 12px 30px;
  background-color: #00c389;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn:hover {
  background-color: #00b07b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 195, 137, 0.3);
}

.cancel-btn {
  padding: 12px 30px;
  background-color: #f8f9fa;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #f0f0f0;
}

/* 确认对话框样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-dialog {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 25px;
  width: 350px;
  animation: dialogFadeIn 0.3s ease-out;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-dialog h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
}

.confirm-dialog p {
  margin-bottom: 20px;
  color: #555;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-btn {
  padding: 8px 16px;
  background-color: #00c389;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn:hover {
  background-color: #00b07b;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .confirm-dialog {
    width: 90%;
    max-width: 350px;
  }
}
</style> 